<template>
  <component :is="nodeConfigName"
             :node="node"></component>
</template>

<script>
import { computed, defineComponent, onMounted } from "vue";
import NodeConfigInput from "./node-config-input.vue";
import NodeConfigMerge from "./node-config-merge.vue";
import NodeConfigJoin from "./node-config-join.vue";
import NodeConfigFilter from "./node-config-filter.vue";
import NodeConfigDistinct from "./node-config-distinct.vue";
import NodeConfigIsNull from "./node-config-isnull.vue";

export default defineComponent({
  name: "node-config-index",
  props: {
    node: Object,
  },
  components: {
    NodeConfigInput,
    NodeConfigMerge,
    NodeConfigJoin,
    NodeConfigFilter,
    NodeConfigDistinct,
    NodeConfigIsNull
  },
  setup(props, ctx) {
    const nodeConfigName = computed(() => {
      return `node-config-${props.node.type}`;
    });
    onMounted(() => {
      console.log(nodeConfigName.value);
    });
    return {
      nodeConfigName
    };
  },
});
</script>

<style scoped>
.field-table {
  padding: 0 12px 24px;
}

.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>